<template>
    <a-table class="sql-result-table" :columns="columns" :data-source="resultData" size="middle"
        :pagination="{ hideOnSinglePage: true, pageSize: 20 }" />
</template>
<script setup>
import { computed } from "vue";
import { useResultStore } from '@/stores/counter'
const Result = useResultStore()
// 结果表格列头
const columns = computed(() => {
    if (Result.result[0]?.columns) {
        return Result.result[0].columns.map((column) => {
            return {
                title: column,
                dataIndex: column,
            };
        });
    }
    return [];
})
// 结果表格数据
const resultData = computed(() => {
    if (!Result.result.length) {
        return [];
    }
   const tempColumns = Result.result[0].columns;
    return Result.result[0].values.map((originRow) => {
        const rowData = {};
        originRow.forEach((col, index) => {
            rowData[tempColumns[index]] = col;
        });
        return rowData;
    });
});
</script>